<template>

    <h2>列表渲染</h2>
    <!-- ul代表无序列表 -->
    <!-- ol代表有序列表 -->
    <ul>
    <li v-for="item in numList">{{item}}</li>
    </ul>
<ul>
<li v-for="item in Student">姓名{{item.name}}性别{{item.sex}}住址{{item.addr}}</li>

</ul>
<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        
    </tr>
    <tr v-for="item in Student">
        <td>{{item.name}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.addr}}</td>
        
    </tr>
        
</table>
</template>


<script setup lang="ts">
import  {ref} from 'vue'
//创建一个响应式数组，类型声明为数字类型
const numList:number[]=ref([1,2,3,4,5]);

// const name:string[]=ref(["张三","王思雨","谢欣悦"])
// const sex:string[]=ref(["男","女","女"])
// const addr:string[]=ref(["朝阳区","顺义区","奉贤区"])

const Student=ref([
    {
        name:"张三",
        sex:"男",
        addr:"朝阳区",
    },
        {
        name:"王思雨",
        sex:"男",
        addr:"朝阳区",
    },
        {
        name:"谢欣悦",
        sex:"男",
        addr:"朝阳区",
    },
])
</script>